<template lang="html">
  <div class="mainbody">
    <div class="main-body">
      <img src="/static/loadding.gif" alt="" v-if='this.loadding'>
      <svg width='100%' height='100%'>

      </svg>
    </div>
    <div class="clearfix" style="margin-top: 1rem;line-height: 2rem;padding: 0 1rem">
      本图谱由 <img src="/static/logo.png" alt="" width="20"><strong>火眼金睛</strong> 数据分析平台独家提供
    </div>
    <div class="footer-nav">
      <div class="nav" @click='changesize(1.2)'>
        ＋放大
      </div>
      <div class="nav" @click='changesize(0.8)'>
        －缩小
      </div>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
import AlloyFinger from 'alloyfinger'

export default {
  data () {
    return {
      result: {
        name: '浙江盘石',
        children: [
          {name: '法人', children: []},
          {name: '法人', children: []},
          {name: '法人', children: []},
          {name: '法人', children: []}
        ]
      },
      loadding: false,
      diameter: document.documentElement.getBoundingClientRect().width,
      size: 1,
      colors: [
        'rgb(195, 212, 27)',
        'rgb(76, 209, 225)',
        'rgb(119, 138, 230)',
        'rgb(145, 220, 138)',
        'rgb(180, 107, 197)',
        'rgb(237, 166, 29)'
      ]
    }
  },
  mounted () {
    var diameter = this.diameter;
    var tree = d3.layout.tree()
        .size([360, 100])
        .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
    var diagonal = d3.svg.diagonal.radial()
        .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
    var that = this
    var drag = d3.behavior.drag()
                .on("drag", function () {
                  var x = +g.attr('transform').split(',')[0].split('(')[1] + d3.event.dx
                  var y = +g.attr('transform').split(',')[1].split(')')[0] + d3.event.dy
                  d3.select(this)
                  .attr('transform', 'translate(' + x + ',' + y + ')scale(' + that.size + ')')
                });
    var svg = d3.select("svg")
      .append("g")
      .attr("transform", "translate(" + diameter / 2 + "," + 7*diameter / 10 + ")")
    var g = d3.select('g')
    var af = new AlloyFinger(document.getElementsByTagName('svg')[0], {
      pinch: function (evt) {
        that.changesize(evt.zoom.toFixed(2))
      }
    })
    g.call(drag)
    // 处理后端返回的json数据（关于公司信息）
    this.getData(tree, svg, diagonal, that, diameter)
  },
  methods: {
    changesize (a) { // 控制图表的放大和缩小
      this.size = this.size * a > 5 ? 5 : this.size * a
      this.size = this.size < 1 ? 1 : this.size
      d3.select('g').attr('transform', 'translate(' + this.diameter / 2 + ',' + 7*this.diameter / 10 + ')scale(' + this.size + ')')
    },
    getQuerry (variable) {
       var query = window.location.href.substring(window.location.href.indexOf('?') + 1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
    },
    getData (tree, svg, diagonal, that, diameter) {
      this.$http('get', 'http://www.51hyjj.com/v1/atlas', { params: {code: this.getQuerry('code'), token: this.getQuerry('token')}})
      .then((data) => {
        this.result = data.data.result || []
        this.result.children.length && this.result.children.forEach(function(item, index){
          item.index = index + 1
        })
        this.setSvg(tree, svg, diagonal, that, diameter)
      })
    },
    setSvg (tree, svg, diagonal, that, diameter) {
      var nodes = tree.nodes(this.result), // 异步获取的数据
          links = tree.links(nodes);
      var link = svg.selectAll(".link") // 绘制连线
          .data(links)
        .enter().append("path")
          .attr("class", "link")
          .attr("d", diagonal);
      var circleColor = [];
      var node = svg.selectAll(".node") // 绘制节点
          .data(nodes)
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) {
            if (d.depth === 0) return "rotate(180)translate(0)";
            return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
          })
      node.append("circle")
          .attr("r", 4)
          .attr('fill', function(d) {
            if (d.depth === 0) return 'rgb(36, 166, 218)'
            if (d.depth === 1) return that.colors[d.index - 1]
            if (d.depth === 2) return that.colors[d.parent.index - 1]
          })
          .attr('stroke', function(d) {
            if (d.depth === 1) return that.colors[d.index - 1]
          })
          .attr('stroke-opacity', function(d) {
            if (d.depth === 1) return 0.5
          })
      node.append("text")
          .attr("dy", function(d) {
            return d.depth === 0 ? "-0.91em" : ".31em"
          })
          .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
          .attr("transform", function(d){
            if (d.depth === 0) return "rotate(180)translate(50)"
            return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
           })
          .text(function(d) { return d.name; })
      d3.select(self.frameElement).style("height", 7*diameter / 5 + "px");
    }
  }
}
</script>

<style lang="css">
.mainbody{
  height: 100%;
  box-sizing: border-box;
  padding-top:1rem;
}
.main-body{
  height: 35rem;
  margin-bottom: 3rem;
  background: url('/static/svg-bg.png') no-repeat center center;
  background-size:  100% 100%;
}
.main-body img{
  position: absolute;
  width: 10rem;
  left: 7.5rem;
  top: 12.5rem;
}
text{
  font-size: 8px;
}
.footer-nav{
  height: 4rem;
  position: fixed;
  bottom: 0;
  padding: 0 0.5rem;
  line-height: 4rem;
}
.footer-nav .nav{
  float: left;
  text-align: center;
  width: 12rem;
  color: rgb(6, 130, 232);
}
.node circle {
  animation:hidestroke 2s infinite;
  stroke-width: 3px;
}
@keyframes hidestroke {
  from { stroke-opacity: 1; stroke-width: 0px}
  to { stroke-opacity: 0; stroke-width: 4px}
}
.node {
  font: 10px sans-serif;
}
span.btn-change{
  display: block;
  color: #888;
  float: right;
  padding: .333333rem;
  border: 1px solid #888;
}
.clearfix:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 0.5px;
}
</style>
